<template>
  <view class="container">
    <view class="header">
      <text class="title">🍎 果树基准值管理</text>
      <button class="add-btn" @click="showAddModal = true">➕ 添加基准值</button>
    </view>

    <!-- 表格标题 -->
    <view class="table-header">
      <text class="cell type">果树类型</text>
      <text class="cell">温度范围 (℃)</text>
      <text class="cell">湿度范围 (%)</text>
      <text class="cell">降雨量范围</text>
      <text class="cell action">操作</text>
    </view>

    <!-- 数据表格 -->
    <scroll-view scroll-y class="table-body">
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="treeList.length === 0" class="empty">暂无数据</view>

      <view v-for="(item, index) in treeList" :key="index" class="table-row">
        <text class="cell type">{{ item.type }}</text>
        <text class="cell">{{ item.minTemp }} ~ {{ item.maxTemp }}</text>
        <text class="cell">{{ item.minSoilM }} ~ {{ item.maxSoilM }}</text>
        <text class="cell">{{ item.minRaindrops }} ~ {{ item.maxRaindrops }}</text>
        <view class="cell action">
          <button size="mini" @click="editTree(item)">编辑</button>
          <button size="mini" type="warn" @click="deleteTree(item.type)">删除</button>
        </view>
      </view>
    </scroll-view>

    <!-- 添加/编辑弹窗 -->
    <view v-if="showAddModal" class="modal">
      <view class="modal-content">
        <text class="modal-title">{{ editMode ? '编辑基准值' : '添加基准值' }}</text>

        <input placeholder="最低温度" type="number" v-model="form.minTemp" />
        <input placeholder="最高温度" type="number" v-model="form.maxTemp" />
        <input placeholder="最低湿度" type="number" v-model="form.minSoilM" />
        <input placeholder="最高湿度" type="number" v-model="form.maxSoilM" />
        <input placeholder="最低降雨量" type="number" v-model="form.minRaindrops" />
        <input placeholder="最高降雨量" type="number" v-model="form.maxRaindrops" />

        <view class="modal-actions">
          <button @click="submitForm">{{ editMode ? '保存修改' : '确认添加' }}</button>
          <button type="warn" @click="cancelEdit">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// ✅ 后端接口基础路径
const BASE_URL = 'http://localhost:8080/device/operate'

// 📦 响应式数据
const treeList = ref([])
const loading = ref(true)
const showAddModal = ref(false)
const editMode = ref(false)
const form = ref({
  type: '',
  minTemp: '',
  maxTemp: '',
  minSoilM: '',
  maxSoilM: '',
  minRaindrops: '',
  maxRaindrops: ''
})

// ✅ 获取所有果树基准值
const loadTreeList = async () => {
  loading.value = true
  uni.request({
    url: `${BASE_URL}/selectTreeReference`,
    method: 'POST',
    header: {
      Authorization: `Bearer ${uni.getStorageSync('token')}`
    },
    success: (res) => {
      if (res.statusCode === 200) {
        treeList.value = res.data
      } else {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    complete: () => (loading.value = false)
  })
}

// ✅ 添加或修改果树基准值
const submitForm = () => {
  const url = editMode.value
    ? `${BASE_URL}/updateTreeReference`
    : `${BASE_URL}/addTreeReference`

  uni.request({
    url,
    method: 'POST',
    data: form.value,
    header: {
    'Authorization': `Bearer ${uni.getStorageSync('token')}`
    },
    success: (res) => {
      uni.showToast({ title: res.data.message || '操作成功', icon: 'none' })
      showAddModal.value = false
      loadTreeList()
    }
  })
}

// ✅ 删除果树基准值
const deleteTree = (type) => {
  uni.showModal({
    title: '确认删除',
    content: `是否删除 ${type} 的基准值？`,
    success: (res) => {
      if (res.confirm) {
        uni.request({
          url: `${BASE_URL}/deleteTreeReference?type=${encodeURIComponent(type)}`,
          method: 'POST',
          header: {
			'Authorization': `Bearer ${uni.getStorageSync('token')}`
          },
          success: (res) => {
            uni.showToast({ title: res.data.message, icon: 'none' })
            loadTreeList()
          }
        })
      }
    }
  })
}

// ✅ 编辑模式
const editTree = (item) => {
  editMode.value = true
  form.value = { ...item }
  showAddModal.value = true
}

// ✅ 取消操作
const cancelEdit = () => {
  showAddModal.value = false
  editMode.value = false
  form.value = {}
}

onMounted(() => {
  loadTreeList()
})
</script>

<style scoped>
.container {
  padding: 40rpx 30rpx;
  background: #f6f7f9;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}
.title {
  font-size: 42rpx;
  font-weight: bold;
  color: #333;
}
.add-btn {
  background-color: #4caf50;
  color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 40rpx;
  font-size: 30rpx;
}

/* 表格样式 */
.table-header, .table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  padding: 25rpx 15rpx;
  border-bottom: 1rpx solid #eee;
  border-radius: 0;
}

.table-header {
  font-weight: bold;
  color: #222;
  background-color: #e6f3ff;
  border-radius: 20rpx 20rpx 0 0;
}

.table-body {
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 0 0 20rpx 20rpx;
}

.cell {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #444;
}

.cell.type {
  flex: 1.3;
  font-weight: 600;
}

.cell.action {
  flex: 1.4;
  display: flex;
  justify-content: center;
  gap: 25rpx; /* 按钮间距拉开 */
}

.cell.action button {
  font-size: 26rpx;
  padding: 15rpx 30rpx;
  border-radius: 16rpx;
}

/* 弹窗整体 */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.modal-content {
  background: #fff;
  border-radius: 30rpx;
  padding: 40rpx 30rpx;
  width: 85%;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.1);
}

.modal-title {
  font-size: 38rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: #333;
}

/* 输入框美化 */
input {
  width: 100%;
  border: 1rpx solid #ccc;
  border-radius: 16rpx;
  margin-bottom: 25rpx;
  padding: 20rpx 25rpx;
  font-size: 30rpx;
  box-sizing: border-box;
  background: #fafafa;
}

/* 弹窗按钮竖排布局 */
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  margin-top: 30rpx;
}
.modal-actions button {
  font-size: 30rpx;
  padding: 22rpx 0;
  border-radius: 20rpx;
}

/* 状态文本 */
.loading, .empty {
  text-align: center;
  color: #777;
  padding: 40rpx;
  font-size: 30rpx;
}

</style>
